/* import React, { Component } from 'react'
import {root} from '../../index'

export default class Demo extends Component {

  state = {count:0}

  myRef = React.createRef()

  add = ()=> {
    this.setState((state)=> ({count:state.count+1}))
  }

  unmount = ()=> {
    root.unmount()
  }

  show = ()=> {
    console.log(this.myRef.current.value);
  }

  componentDidMount(){
    this.timer = setInterval(()=> {
      this.add()
    },1000)
    console.log('componentDidMount');
  }

  componentWillUnmount(){
    clearInterval(this.timer)
    console.log('componentWillUnmount');
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.myRef} />
        <h2>当前求和为{this.state.count}</h2>
        <button onClick={this.add}>点我+1</button>
        <button onClick={this.unmount}>点我卸载组件</button>
        <button onClick={this.show}>点我提示输入</button>
      </div>
    )
  }
}
 */








import React from 'react'
import {root} from '../../index'
export default function Demo() {
  
  // 1.State Hook让函数组件也可以有state状态, 并进行状态数据的读写操作
  const [count,setCount] = React.useState(0)
  const [name,setName] = React.useState('tome')
  // 3.Ref Hook可以在函数组件中存储/查找组件内的标签或任意其它数据
  const myRef = React.useRef()

  // 2.Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)
  React.useEffect(()=> {
    // console.log('componentDidMount');
    const timer = setInterval(()=> {
      add()
    },1000)
    //下面的函数相当于componentWillUnmount
    return ()=> {
      clearInterval(timer)
      // console.log('componentWillUnmount')
    }
  },[])//不写第二个参数默认全部监测(相当于[count,name]),写[]谁都不监测,[count]只监测count




  function add(){
    // setCount(count+1)
    setCount( count => count+1 )
  }
  function changeName(){
    setName('jack')
  }
  function unmount(){
    root.unmount()
  }
  function show(){
    console.log(myRef.current.value)
  }
  return (
    <div>
      <input ref={myRef} type="text" />
      <h2>当前求和为{count}</h2>
      <h2>姓名:{name}</h2>
      <button onClick={add}>点我+1</button>
      <button onClick={changeName}>点我改名</button>
      <button onClick={unmount}>点我卸载组件</button>
      <button onClick={show}>点我提示输入</button>
    </div>
  )
}
